<template>
  <div class="dataTable">
    <div class="header">
      <div class="flex">
        <div class="key_icon" />
        <div>角色管理</div>
      </div>
      <div class="flex">
        <el-button class="search_btn" type="primary" icon="el-icon-plus" @click="add_visible = true">新增</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
      fit
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
      />
      <el-table-column
        prop="role_name_zh"
        label="角色名称"
        align="center"
      />
      <el-table-column
        prop="operate"
        label="操作"
      >
        <div slot-scope="{row}" style="display: flex;">
          <el-tooltip effect="dark" content="编辑" placement="top">
            <div class="edit_icon" @click="() => { edit_visible = true; checkData = row }" />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top">
            <div v-if="canDelete(row.role_id)" class="delete_icon" @click="remove(row)" />
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center; margin-top: 20px;"
      :current-page="pager.page"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
    <add :visible="add_visible" @close="closeAdd" />
    <edit :visible="edit_visible" :check-data="checkData" @close="closeEdit" />
  </div>
</template>

<script>
import { role_list, role_delete } from '@/api/role'
import edit from './edit-dialog.vue'
import add from './add-dialog.vue'

export default {
  name: 'DataTable',
  components: { edit, add },
  data() {
    return {
      address: '',
      loading: false,
      pager: {
        page: 1,
        pageSizes: [5, 10, 20],
        pageSize: 10,
        total: 0
      },
      dataList: [],
      add_visible: false,
      edit_visible: false,
      checkData: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const param = {
          page: this.pager.page,
          per_page: this.pager.pageSize
        }
        const { code, data } = await role_list(param)
        if (!code) {
          this.dataList = data.data
          const { pager } = this
          pager.page = data.current_page
          pager.total = data.total
          pager.pageSize = Number(data.per_page)
        }
        this.loading = false
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    remove(data) {
      if (data.role_id === 100000) {
        this.$messageOnce.warning('管理员角色不可删除')
        return
      }
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.loading = true
        try {
          const { code } = await role_delete(data.role_id)
          if (!code) {
            this.$messageOnce.success('操作成功！')
            this.loadData()
          }
        } catch (error) {
          console.error(error)
        } finally {
          this.loading = false
        }
      }).catch(() => { })
    },
    canDelete(id) {
      if (id === 100000) {
        return false
      } else if (id === 100003) {
        return false
      } else if (id === 100004) {
        return false
      } else {
        return true
      }
    },
    closeAdd() {
      this.add_visible = false
    },
    closeEdit() {
      this.edit_visible = false
    },
    pageSizeChange(val) {
      const { pager } = this
      pager.pageSize = val
      this.loadData()
    },
    pageChange(val) {
      const { pager } = this
      pager.page = val
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.dataTable {
	width: 1320px;
	min-height: 500px;
	background: #FFFFFF;
	box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 30px;
	padding: 20px;
	.header {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2C2C2C;
		margin-bottom: 25px;
		.key_icon {
		  width: 16px;
			height: 16px;
			background: url('../../assets/role_icon.png');
			background-size: 100%;
			margin-right: 10px;
		}
		.search_input {
			width: 300px;
		}
		.search_btn {
			margin-left: 80px;
		}
	}
}

.flex {
	display: flex;
	align-items: center;
}

.edit_icon {
	background: url('../../assets/edit@list.png');
  @include list_icons;
}

.delete_icon{
  background: url('../../assets/delete@list.png');
  @include list_icons;
}
</style>
